<template>
    <el-upload class="upload-video" :http-request="Upload" drag action="" :before-upload="beforeUpload" :show-file-list="false" :multiple="false">
      <div class="uv-video-bg" v-if="uploadRes.url">
        <video class="uv-video" :src="'https://img.qumoyugo.com'+uploadRes.url" controls="controls">您的浏览器不支持视频播放</video>
        <el-icon class="uv-close" @click.stop="clearVideo">
          <icon-close/>
        </el-icon>
      </div>
      <div v-else style="padding-top: 40px;">
        <el-icon style="font-size: 42px;color: #aaa">
          <icon-upload-filled />
        </el-icon>
        <div class="el-upload__text">
          将视频文件拖到此处，或<em>点击上传</em>
        </div>
      </div>
      <template #tip>
        <span class="el-upload__tip">只能上传 mp4/ogg/flv/avi/wmv/rmvb 格式，且不超过10M</span>
      </template>
    </el-upload>
</template>

<script>
import { client } from "@/utils/alioss";
import { ElMessage } from 'element-plus'
export default {
  props:{
    data:{
      default:()=>{return {}}
    },
    videoKey:{
      default:""
    },
  },
  data() {
    return {
      uploadRes: {
        url: "",
        title: ""
      },
      filename:"",
      limitSize: 10,//unit: Mb
    };
  },
  watch:{
    data(n){
      this.uploadRes.url = (n||{}).url||"";
      this.uploadRes.title = (n||{}).title||"";
    }
  },
  mounted(){
    console.log("video props:",this.data);
    this.uploadRes.url = this.data.url||"";
    this.uploadRes.title = this.data.title||"";
  },
  methods: {
    Upload(file) {
      // DN5UKYOLEL5JE3D111YT21629427626056.mp4
      // var fileName = `/video/DN5UKYOLEL5JE3D111YT21629427626056.mp4`;
      client().put(this.filename, file.file).then((res) => {
          console.log("上传成功：", res);
          this.uploadRes.url = "/"+res.name;
          this.$emit("uploadback",this.uploadRes);
        }).catch((err) => {
          ElMessage.error(err);
        });
    },
    // 上传前验证
    beforeUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < this.limitSize;
      if (["video/mp4","video/ogg","video/flv","video/avi","video/wmv","video/rmvb"].indexOf(file.type) == -1) {
        ElMessage.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt10M) {
        ElMessage.error(`上传视频大小不能超过${this.limitSize}MB哦!`);
        return false;
      }
      this.uploadRes.title = file.name||"";
      this.filename = (()=>{
        let type=file.name.substr(file.name.indexOf('.'));
        if(this.videoKey){
          return "/video/product_key_"+this.videoKey+type;
        }else{
          return "/video/product_time_"+(+new Date())+type;
        }
      })();
    },
    clearVideo(){
      this.uploadRes = {
        url: "",
        title: ""
      };
      this.$emit("uploadback",{});
    }
  },
};
</script>

<style lang="scss">
.upload-video{
  position: relative;
  width: 358px;
  .uv-video-bg{
    .uv-close{
      position: absolute;
      top: 8px;
      right: 8px;
      color: #fff;
      background-color: rgb(0, 0, 0);
      padding: 4px;
      border-radius: 50%;
    }
    .uv-video{
      width: 100%;
    }
  }
}
</style>